<template>
  <v-app>
    <GlobalHeader></GlobalHeader>
    <v-main class="sustainability-section">
      <v-container fluid fill-height class="fill-height-container">
        <v-row align="center" justify="center" class="full-height-row">
          <v-col cols="12" md="10" lg="8" xl="6">
            <v-card class="description-card" elevation="4" >
              <v-sheet class="top-banner">
                <h2 class="banner-title" style="color: green;font-size: 50px">致力于共同建设美好未来</h2>
                <p class="banner-subtitle" style="color: green;font-size: 30px">绿色赋能发展，责任引领未来</p>
              </v-sheet>

              <v-card-text class="description-text" style="text-align: left;">
                作为循环经济互联网平台，承诺在业务运营中践行可持续发展理念，对环境管理的追求超越了自身的承诺。凭借海量的产业资源和先进的数字化工具，帮助行业各方积极推动可持续发展转型。通过提供经验、技术及强大的低排放和零排放解决方案，我们支持不断变化的环境管理决策，助力行业从内到外实现绿色发展。
              </v-card-text>
              <div class="cta-container">
                <v-btn
                    color="success"
                    rounded="pill"
                    size="large"
                    class="cta-button"
                >
                  <span class="button-text">联系我们的可持续发展团队</span>
                  <v-icon end>mdi-arrow-right</v-icon>
                </v-btn>
              </div>
            </v-card>

          </v-col>
        </v-row>
      </v-container>
    </v-main>

  </v-app>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useDisplay } from 'vuetify';
import GlobalHeader from "@/components/Index/GlobalHeader.vue";


const display = useDisplay();
const isMobile = ref(false);

onMounted(() => {
  isMobile.value = display.smAndDown.value;
});
</script>

<style lang="scss" scoped>
.sustainability-section {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background-image: url('@/assets/images/logo/digital.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.fill-height-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1200px;
  z-index: 1;
}

.full-height-row {
  flex-grow: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.combined-card {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 50px;
  padding: 30px; /* 为卡片添加一些内边距 */
  width: 80%; /* 设置卡片宽度为屏幕的 80% */
  max-width: 960px; /* 设置卡片最大宽度 */
}

.top-banner {
  color: #1976d2;
  text-align: center;
  margin-bottom: 30px; /* 增加与插画的间距 */
}

.banner-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
}

.banner-subtitle {
  font-size: 20px;
  color: #64b5f6;
}

.illustration-container {
  display: flex;
  justify-content: center;
  margin-bottom: 0; /* 移除插画容器的底部外边距 */

  .illustration {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  }
}

.description-card {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  width: 800px;
  height: 600px;
  margin-top: 290px;
}

.description-text {
  padding: 40px;
  line-height: 1.8;
  color: #333;
  text-align: center;
  font-size: 18px;
}

.cta-container {
  display: flex;
  justify-content: center;
}

.cta-button {
  font-size: 20px;
  padding: 18px 40px;
  letter-spacing: 1.2px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* 响应式调整 */
@media (max-width: 960px) {
  .combined-card {
    width: 90%;
    padding: 25px;
  }
  .top-banner {
    margin-bottom: 20px;
  }
  .banner-title {
    font-size: 28px;
  }
  .banner-subtitle {
    font-size: 18px;
  }
  .description-text {
    padding: 30px;
    font-size: 16px;
  }
  .cta-button {
    font-size: 18px;
    padding: 15px 35px;
  }
}

@media (max-width: 600px) {
  .combined-card {
    width: 95%;
    padding: 20px;
  }
  .top-banner {
    margin-bottom: 15px;
  }
  .banner-title {
    font-size: 24px;
  }
  .banner-subtitle {
    font-size: 16px;
  }
  .description-text {
    padding: 20px;
    font-size: 15px;
  }
  .cta-button {
    font-size: 16px;
    padding: 12px 30px;
  }
}
</style>